import {
	Card,
	CardContent,
	CardDescription,
	CardFooter,
	CardHeader,
	CardTitle,
} from "@poketto/ui/card";
import type { ChartConfig } from "@poketto/ui/chart";
import {
	ChartContainer,
	ChartTooltip,
	ChartTooltipContent,
} from "@poketto/ui/chart";
import { TrendingUp } from "lucide-react";
import * as React from "react";
import { Pie, PieChart } from "recharts";

export const description = "A pie chart with stacked sections";

const desktopData = [
	{ month: "january", desktop: 186, fill: "var(--color-january)" },
	{ month: "february", desktop: 305, fill: "var(--color-february)" },
	{ month: "march", desktop: 237, fill: "var(--color-march)" },
	{ month: "april", desktop: 173, fill: "var(--color-april)" },
	{ month: "may", desktop: 209, fill: "var(--color-may)" },
];

const mobileData = [
	{ month: "january", mobile: 80, fill: "var(--color-january)" },
	{ month: "february", mobile: 200, fill: "var(--color-february)" },
	{ month: "march", mobile: 120, fill: "var(--color-march)" },
	{ month: "april", mobile: 190, fill: "var(--color-april)" },
	{ month: "may", mobile: 130, fill: "var(--color-may)" },
];

const chartConfig = {
	visitors: {
		label: "Visitors",
	},
	desktop: {
		label: "Desktop",
	},
	mobile: {
		label: "Mobile",
	},
	january: {
		label: "January",
		color: "hsl(var(--chart-1))",
	},
	february: {
		label: "February",
		color: "hsl(var(--chart-2))",
	},
	march: {
		label: "March",
		color: "hsl(var(--chart-3))",
	},
	april: {
		label: "April",
		color: "hsl(var(--chart-4))",
	},
	may: {
		label: "May",
		color: "hsl(var(--chart-5))",
	},
} satisfies ChartConfig;

export function Component() {
	return (
		<Card className="flex flex-col">
			<CardHeader className="items-center pb-0">
				<CardTitle>Pie Chart - Stacked</CardTitle>
				<CardDescription>January - June 2024</CardDescription>
			</CardHeader>
			<CardContent className="flex-1 pb-0">
				<ChartContainer
					config={chartConfig}
					className="mx-auto aspect-square max-h-[250px]"
				>
					<PieChart>
						<ChartTooltip
							content={
								<ChartTooltipContent
									labelKey="visitors"
									nameKey="month"
									indicator="line"
									labelFormatter={(_, payload) =>
										chartConfig[
											payload?.[0].dataKey as keyof typeof chartConfig
										].label
									}
								/>
							}
						/>
						<Pie data={desktopData} dataKey="desktop" outerRadius={60} />
						<Pie
							data={mobileData}
							dataKey="mobile"
							innerRadius={70}
							outerRadius={90}
						/>
					</PieChart>
				</ChartContainer>
			</CardContent>
			<CardFooter className="flex-col gap-2 text-sm">
				<div className="flex items-center gap-2 font-medium leading-none">
					Trending up by 5.2% this month <TrendingUp className="size-4" />
				</div>
				<div className="leading-none text-muted-foreground">
					Showing total visitors for the last 6 months
				</div>
			</CardFooter>
		</Card>
	);
}
